import { _decorator, Component, Node, Label } from 'cc';
import { ReactiveNumber } from '../../../../scripts/libs/rxjs/cc3/ReactiveNumber';
import { BaseView } from '../../../../scripts/libs/rxjs/cc3/BaseView';
import { ReactiveProperty } from '../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { Button } from 'cc';
import { EditorBlock } from './EditorBlock';
import { Prefab } from 'cc';
import { instantiate } from 'cc';
import { v3 } from 'cc';
import { shapeInfoMap } from '../../game/basic';
import { gm } from '../../../../scripts/managers/GameManager';
import { BindButton } from '../../../../scripts/libs/rxjs/cc3/BindButton';
import { nc } from '../../../../scripts/libs/rxjs/NotificationCenter';
import { BindNodeTouch, BindNodeTouchStart } from '../../../../scripts/libs/rxjs/cc3/BindNode';
const { ccclass, property, executeInEditMode } = _decorator;

@ccclass('ShapeEditorButton')
@executeInEditMode
export class ShapeEditorButton extends BaseView {

    @property(ReactiveNumber)
    _colorId: ReactiveNumber = ReactiveNumber.DefaultValue(0);
    @property
    get colorId(): number { return this._colorId.value }
    set colorId(v: number) { this._colorId.Value = v; }

    @property(ReactiveNumber)
    _shapeId: ReactiveNumber = ReactiveNumber.DefaultValue(0);
    @property
    get shapeId(): number { return this._shapeId.value }
    set shapeId(v: number) { this._shapeId.Value = v; }

    @property(Prefab)
    editorBlockPrefab: Prefab = null;

    @property(Button)
    selfButton: Button = null;

    @property(Node)
    container: Node = null;

    editorBlock: EditorBlock = null;

    @property(Label)
    shapeIdLabel: Label = null;

    useObserves() {
        return [
            this._shapeId.subscribe(this.refreshShape.bind(this)),
            this._colorId.subscribe(this.refreshColor.bind(this)),
            gm.editColorSelected.subscribe(_ => this.colorId = _),
            // BindButton(this.selfButton).subscribe(this.selfButtonClicked.bind(this)),

            BindNodeTouch(this.selfButton.node).subscribe(_ => {
                if (_.type == 'touch-start') {
                    nc.post('create_shape', { shapeId: this.shapeId });
                }
                _.preventSwallow = true;
            }),
        ];
    }

    refreshShape() {
        this.container.destroyAllChildren();
        this.editorBlock = null;

        if (this.shapeId > 0) {
            this.editorBlock = instantiate(this.editorBlockPrefab).getComponent(EditorBlock);
            this.editorBlock.node.setParent(this.container);
            this.editorBlock.shapeId = this.shapeId;
            this.editorBlock.colorId = this.colorId;
            this.editorBlock.infoLabel.node.active = false;
            let shapeInfo = shapeInfoMap.get(this.shapeId);
            let maxSize = Math.max(shapeInfo.size[0], shapeInfo.size[1]);
            let scale = 1 / 3;
            if (maxSize > 3) {
                scale *= 3 / maxSize;
            }
            this.container.setScale(v3(1, 1, 1).multiplyScalar(scale));
        } else {
            this.container.setScale(v3(1, 1, 1).multiplyScalar(1));
        }

        this.shapeIdLabel.string = `${this.shapeId}`;
    }

    refreshColor() {
        if (this.editorBlock != null) {
            this.editorBlock.colorId = this.colorId;
        }
    }

    selfButtonTouchStart() {
    }
}

